<template>
  <div class="page">
    <van-nav-bar title="目录编制" left-text="返回" @click-left="goBack">
      <van-icon slot="left" name="arrow-left" size="20" />
    </van-nav-bar>
    <div class="content">
      <i1-card :dirSumNum=mlzl  :eventsNum="box2Data.sxzl" :resultNum="box2Data.bjzl"/>
      <i2-box :v6=box1Data.jlsbzysj :v5=box1Data.yfbml :v4=box4Data :v1=box2Data.glmlzl :v2=(box2Data.mlzl-box2Data.glmlzl).toFixed(0) :v3=(box2Data.glmlzl/box2Data.mlzl*100).toFixed(2)  />
      <i3-table />
      <i4-chart />
      <i5-chart :kb="box1Data.kb" :jk="box1Data.jk" :wj="box1Data.wj" />
    </div>
  </div>
</template>

<script>
/**
 * 目录编制
 */
import I1Card from "@/views/directories/modules/i1-card";
import I2Box from "@/views/directories/modules/i2-box";
import I3Table from "@/views/directories/modules/i3-table";
import I4Chart from "@/views/directories/modules/i4-chart";
import I5Chart from "@/views/directories/modules/i5-chart";
import API from "@/api/directories";
import APIover from "@/api/overview";
export default {
  name: "directoriesIndex",
  components: { I1Card, I2Box, I3Table, I4Chart, I5Chart },
  data() {
    return {
      box1Data: {},
      mlzl: 0,
      box2Data: {
        sxzl: 0,
        bjzl: 0,
        glmlzl: 0,
        mlzl: 0,
      },
      box4Data: {},
      box5Data: {},
    };
  },
  methods: {
    goBack() {
      this.$router.push({ path: "/" });
    },
    getBoxData() {
      let handleV1 = (res) => {
        this.box1Data = res.data.body.data[0];
      };

        let handleV2 = (res) => {
            this.box2Data.sxzl = res.data.body.data[0].sxzl;

        };
        let handleV3 = (res) => {
            this.box2Data.bjzl = res.data.body.data[0].bjzl;

        };
        let handleV4 = (res) => {
            this.box2Data.glmlzl = res.data.body.data[0].sxbzmlzl;

        };
        let handleV5 = (res) => {
            this.box2Data.mlzl = res.data.body.data[0].sxmlzl;

        };
        let handleV8 = (res) => (this.box4Data.wgjzyzl = res.data.body.data[0].wgjzyzl,console.log(this.box4Data.wgjzyzl ));
        let handleV9 = (res) => (this.box4Data.gjzyzl = res.data.body.data[0].gjzyzl,console.log(this.box4Data.gjzyzl ));
        let handleVo1 = (res) => (this.mlzl = res.data.body.data[0].mlzl);
        API.getBox1_v1().then(handleV1);
        API.getBox1_v2().then(handleV2);
        API.getBox1_v3().then(handleV3);
        API.getBox1_v4().then(handleV4);
        API.getBox1_v5().then(handleV5);
        APIover.getBox1_v1().then(handleVo1);
        API.getBox1_v8().then(handleV8);
        API.getBox1_v9().then(handleV9);

    },
  },

  mounted() {
    this.getBoxData();
  },
};
</script>

<style lang="less" scoped>
.page {
  .content {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 10px;
    .content-card {
      margin: 10px 0;
      border: 1px solid #f2f2f2;
      background-color: #ffffff;
      box-shadow: 0 4px 8px rgba(90, 163, 236, 0.14);
      border-radius: 4px;
    }
  }
}
</style>
